<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变盒子大小</DIV></title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 0 auto;
        }
        .box4{
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div id="box" class="box" value="ds">
        <p id="test1" name="test1" class="test1">1</p>
        <p>2</p>
        <p>3</p>
        <p id="test4" name="test4" class="test4">4</p>
    </div>
    <!-- <div id="box"></div> -->
    <input value="测试" type="button" id="btn" />
</body>
<script>
    var box=document.getElementById('box');
    console.log(box.firstChild);
    console.log(box.lastChild);
    console.log(box.nodeName);
    console.log(box.nodeValue);
    var btn=document.getElementById("btn");
    var test1=document.getElementById("test1");
    console.log(btn.nodeValue);
    console.log(box.nodeValue);
    console.log(box.nextSibling);//获取同一树层级后面一个节点
    console.log(btn.previousSibling);
    // console.log(box.className);//原解决方式
    // console.log(box.classList);//html5新增放回class数组
    // console.log(box.classList.toggle("box1"));
    // console.log(box.classList);//html5新增放回class数组

    // console.log(box.classList.length);//获取到class名称的个数
    // console.log(box.classList.add("box4"));//添加class元素
    // console.log(box.classList.remove("box2"));//移除class元素
    // console.log(box.classList);
    // console.log(box.classList.item(1));//通过class元素集的下标获取class指定名
    // var i=0;//初始化等于0
    // box.onclick=function(){//处理盒子的单击事件
    //     console.log(this.attributes);//获取标签的属性集合
    //     console.log(this.getAttribute("id"));//通过属性获取到属性值
    //     //this.setAttribute("class","box1");//修改属性值
    //     this.removeAttribute("id");//删除属性
    //     ++i;//每点击一次i+1
    //     if(i % 2){//判断当前点击的次数是否为奇数
    //         //当点击盒子时为奇数情况下改变的样式
    //         this.style.width="200px";
    //         this.style.height="200px";
    //         this.innerHTML="大"
    //     }else{//当点击次数为偶数的情况下改变样式
    //         this.style.width="50px";
    //         this.style.height="50px";
    //         this.innerHTML="小"
    //     }
    // }

    // var ele=document.getElementById("box");
    // ele.style.width='100px';
    // ele.style.height='100px';
    // ele.style.backgroundColor='red';
    // ele.style.transform='rotate(7deg)';
</script>
</html>